import Header from "@/components/Header";
import Remind from "./components/remind";
import "./index.scss";
import { useEffect, useState } from "react";

import { settingsList, updSettings } from "../../api/index";
import {
  settingsListDateType,
  settingsType,
} from "../../api/types";

export default function Settings() {
  const [data, setData] = useState<settingsListDateType | []>([]);
  const [insureRemind, setInsureRemind] = useState<settingsType | []>([]);
  const [annuallyRemind, setAnnuallyRemind] = useState<settingsType | []>([]);
  const [maintenanceRemind, setMaintenanceRemind] = useState<settingsType | []>(
    []
  );
  const changesettings = (id: number, type: string, value: number) => {
    updSettings(id, type, value);
  };

  useEffect(() => {
    const get = async () => {
      const list = (await settingsList()).data;

      setData(list.data);
      setInsureRemind(() => {
        return list.insureRemind.map((item) => {
          item.label = item.name;
          item.value = item.name;
          return item;
        });
      });
      setAnnuallyRemind(() => {
        return list.annuallyRemind.map((item) => {
          item.label = item.name;
          item.value = item.name;
          return item;
        });
      });
      setMaintenanceRemind(() => {
        return list.maintenanceRemind.map((item) => {
          item.label = item.name;
          item.value = item.name;
          return item;
        });
      });
    };
    // console.log(list);
    get();
  }, []);
  return (
    <>
      <Header title="消息提醒"></Header>
      <div className="reminds">
        {insureRemind.length > 0 && (
          <Remind
            str="保险到期提醒"
            options={insureRemind}
            defaultValue={data[0]?.insureRemind}
            onchange={changesettings}
          ></Remind>
        )}
        {annuallyRemind.length > 0 && (
          <Remind
            str="年检到期提醒"
            options={annuallyRemind}
            defaultValue={data[0]?.annuallyRemind}
            onchange={changesettings}
          ></Remind>
        )}
        {maintenanceRemind.length > 0 && (
          <Remind
            str="保养提醒"
            options={maintenanceRemind}
            defaultValue={data[0]?.maintenanceRemind}
            onchange={changesettings}
          ></Remind>
        )}
      </div>
    </>
  );
}
